<!-- src/views/CompanyDetail.vue -->
<template>
  <div class="company-detail-container">
    <div class="company-detail">
      <div class="header">
        <h1>{{ companyData.company_name ? companyData.company_name + '薪资数据' : '公司薪资数据' }}</h1>
        <div class="update-time">更新时间：{{ formattedUpdateTime }}</div>
      </div>

      <!-- 使用 Element Plus 的 Tabs 组件 -->
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="职级和薪酬" name="salary">
          <SalaryTab :company-data="companyData" :company-id="companyId" />
        </el-tab-pane>
        <el-tab-pane label="薪酬讨论" name="discussion">
          <Salarieslist :company-id="companyId" />
        </el-tab-pane>
        <el-tab-pane label="吐槽" name="complaint">
          <Roastlist :company-id="companyId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
import { CampatydataApi, SalariesdataApi } from '@/utils/api';

// 引入子组件
import SalaryTab from '../components/SalaryTab.vue';
// import DiscussionTab from '../components/DiscussionTab.vue';
import Roastlist from '@/views/Roastlist.vue';
import Salarieslist from '@/views/Salarieslist.vue';

const activeTab = ref('salary');
const companyId = computed(() => {
  // 从URL中获取公司ID
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('id') || '';
});

const companyName = computed(() => {
  // 从URL中获取公司ID
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('name') || '';
});

const companyData = ref({});
// const salaryDiscussionList = ref([]);

const formattedUpdateTime = computed(() => {
  if (!companyData.value.updated_at) return '2025-09-02';
  const date = new Date(companyData.value.updated_at);
  return date.toLocaleDateString('zh-CN');
});

const fetchCompanyData = async () => {
  try {
    const response = await CampatydataApi.getSalaryStatsByCompanyId(companyId.value);
    companyData.value = response.data || response;

    // await fetchSalaryDiscussionData();
  } catch (error) {
    console.error('获取公司薪资数据失败:', error);
  }
};

// const fetchSalaryDiscussionData = async () => {
//   try {
//     const response = await SalariesdataApi.getSalaryByCompanyId(companyId.value, {
//       skip: 0,
//       limit: 100
//     });
//     // console.log(111111,response)
//     salaryDiscussionList.value = response.data || [];
//   } catch (error) {
//     console.error('获取薪酬讨论数据失败:', error);
//     salaryDiscussionList.value = [];
//   }
// };

const handleTabClick = (tab) => {
  // 不再需要手动触发薪酬数据获取
  // if (tab.name === 'discussion' && salaryDiscussionList.value.length === 0) {
  //   fetchSalaryDiscussionData();
  // }
};

onMounted(() => {
  fetchCompanyData();
});
</script>

<style scoped>
.company-detail-container {
  display: flex;
  justify-content: center;
  /* background-color: #f8f9fa; */
  min-height: 100vh;
}

.company-detail {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.update-time {
  font-size: 14px;
  color: #666;
}
</style>